<template>
  <div class="four-class-two">
    <van-row class="four-class-two-row">
      <van-col
        class="four-class-two-col"
        v-for="(item, i) in list"
        :key="i"
        :span="8"
      >
        <div
          class="four-class-two-item"
          v-for="ite in getItem(item, i)"
          :key="ite.id"
          @click="handleMoreClick(i, ite)"
          :class="[
            {
              item__active: ite.id
                ? ids[i + 1] === ite.id
                : ids[i + 1] === ite.value
            },
            `level__${i + 1}`
          ]"
          :style="
            (ite.id ? ids[i + 1] === ite.id : ids[i + 1] === ite.value)
              ? `color:${titleActiveColor};`
              : ''
          "
        >
          {{ ite.name }}
        </div>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import { flattenArr } from './index.js'
export default {
  name: 'StyleTwo',
  inject: ['leafSubmit'],
  props: {
    value: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    },
    color: {
      type: String,
      default: '#fff'
    },
    titleActiveColor: {
      type: String,
      default: '#fff'
    },
    titleInactiveColor: {
      type: String,
      default: '#333'
    },
    level: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      ids: []
    }
  },
  computed: {
    hierarchy() {
      const levelArr = flattenArr(this.data).map((item) => item.level)
      return Math.max(...levelArr) - 1
    },
    list() {
      const arr = new Array(this.hierarchy)
      flattenArr(this.data).forEach((item) => {
        if (arr[item.level - 2] === undefined) {
          arr[item.level - 2] = []
        }
        arr[item.level - 2].push(item)
      })
      return arr
    },
    getItem() {
      return (item, index) => {
        return item.filter((ite) => ite.parentId === this.ids[index])
      }
    }
  },
  created() {
    this.ids = this.value
  },
  mounted() {
  },
  methods: {
    handleMoreClick(index, item) {
      this.ids[index + 1] = item.id || ''
      const nids = []
      for (let i = 0; i < index + 2; i++) {
        nids.push(this.ids[i])
      }
      this.ids = nids
      if (flattenArr(this.list).find((d) => d.id === item.id).leaf) {
        this.leafSubmit(this.ids)
      }
    }
  }
}
</script>
<style lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';
.four-class-two {
  max-height: 100%;
  &-row{
    display: flex;
  }
  &-col {
    display: flex;
    flex-direction: column;
  }
  &-item {
    width: 100%;
    height: rem(100);
    display: inline-flex;
    align-items: center;
    padding-left: rem(30);
    font-size: rem(20);
    font-weight: 500;
    &.level {
      &__1 {
        background-color: #f0f0f0;
        color: #888888;
      }
      &__2 {
        background-color: #f8f8f8;
        color: #333333;
      }
      &__3 {
        background-color: #ffffff;
        color: #333333;
      }
    }
    &.item__active {
      background-color: #fff;
    }
  }
}
</style>
